

<template>
  <view class="Mall4j container">
    <view class="line-fix" />
    <view class="tit-background" />
    <view class="prod-show">
      <view class="hotsale-item-cont">
        <jp-falls class="falls" :routesList="prodList">
          <template #left={left}>
            <view v-for="(item, index) in left" :key="item.prodId">
              <prod :item="item" :showCancelCollect="showCancelCollect" @getCollectionProd="reloadCollection" />
            </view>
          </template>
          <template #right={right}>
            <view v-for="(item, index) in right" :key="item.prodId">
              <prod :item="item" :showCancelCollect="showCancelCollect" @getCollectionProd="reloadCollection" />
            </view>
          </template>
        </jp-falls>
        <!-- <view v-for="(item, key) in prodList" :key="key">
          <block>
            <prod :item="item" :show-cancel-collect="showCancelCollect" @getCollectionProd="reloadCollection" />
          </block>

        </view> -->

      </view>

    </view>

    <view v-if="loadAll" class="loadall">—— {{ i18n.allGoodsLoaded }} ——</view>
    <!-- 空 -->
    <empty v-if="prodList.length==0" />
  </view>
</template>

<script>
var http = require('../../utils/http.js')
import prod from '../../components/production/index.vue'
import empty from '../../components/empty-tips/index.vue'

export default {

  components: {
    prod,
    empty
  },
  data () {
    return {
      sts: 0,
      prodList: [],
      title: '',
      current: 1,
      size: 10,
      pages: 0,
      tagid: 0,
      loadAll: false, // 已加载全部
      showCancelCollect: false // 是否展示收藏商品
    }
  },

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      current: 1,
      pages: 0,
      sts: options.sts,
      title: options.title ? options.title : ''
    })

    if (options.tagid) {
      this.setData({
        tagid: options.tagid
      })
    }

    if (this.sts == 0) {
      if (options.tagid == 1) {
        wx.setNavigationBarTitle({
          title: this.i18n.dailyUpdate
        })
      } else if (options.tagid == 2) {
        wx.setNavigationBarTitle({
          title: this.i18n.mallHotSale
        })
      } else if (options.tagid == 3) {
        wx.setNavigationBarTitle({
          title: this.i18n.moreBaby
        })
      }
    } else if (this.sts == 1) {
      wx.setNavigationBarTitle({
        title: this.i18n.newProduct
      })
    } else if (this.sts == 2) {
      wx.setNavigationBarTitle({
        title: this.i18n.limitedTimeOffer
      })
    } else if (this.sts == 3) {
      wx.setNavigationBarTitle({
        title: this.i18n.dailyPurchase
      })
    } else if (this.sts == 4) {
      wx.setNavigationBarTitle({
        title: this.i18n.couponEventGoods
      })
    } else if (this.sts == 5) {
      wx.setNavigationBarTitle({
        title: this.i18n.myCollectionGoods
      })
      this.showCancelCollect = true
    } else {
      wx.setNavigationBarTitle({
        title: this.title
      })
    }

    this.loadProdData(options)
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.current < this.pages) {
      this.setData({
        current: this.current + 1
      })
      this.loadProdData()
    } else {
      this.setData({
        loadAll: true
      })
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 加载商品数据
     */
    loadProdData: function (options) {
      const sts = this.sts

      if (sts == 0) {
        // 分组标签商品列表
        this.getTagProd()
      } else if (sts == 1) {
        // 新品推荐
        const url = '/prod/lastedProdPage'
        this.getActProd(url)
      } else if (sts == 2) {
        // 限时特惠
        const url = '/marking/discount/prodList'
        this.getActProd(url)
      } else if (sts == 3) {
        // 每日疯抢
        const url = '/prod/moreBuyProdList'
        this.getActProd(url)
      } else if (sts == 4) {
        // 优惠券商品列表
        this.getProdByCouponId(this.tagid)
      } else if (sts == 5) {
        // 收藏商品列表
        this.getCollectionProd()
      }
    },
    getActProd: function (url) {
      var ths = this
      var params = {
        url: url,
        method: 'GET',
        data: {
          current: ths.current,
          size: ths.size
        },
        callBack: function (res) {
          let list = []

          if (res.current == 1) {
            list = res.records
          } else {
            list = ths.prodList
            list = list.concat(res.records)
          }

          ths.setData({
            prodList: list.map((e) => {
              return {
                ...e,
                price_1: ths.$parsePrice(e.price)[0],
                price_2: ths.$parsePrice(e.price)[1],
                sts: ths.sts,
              }
            }),
            pages: res.pages
          })
        }
      }
      http.request(params)
    },

    /**
     * 获取我的收藏商品
     */
    getCollectionProd: function () {
      var ths = this
      var params = {
        url: '/p/user/collection/prods',
        method: 'GET',
        data: {
          current: ths.current,
          size: ths.size
        },
        callBack: function (res) {
          let list = []

          if (res.current == 1) {
            list = res.records
          } else {
            list = ths.prodList
            list = list.concat(res.records)
          }

          ths.setData({
            prodList: list.map((e) => {
              return {
                ...e,
                price_1: ths.$parsePrice(e.price)[0],
                price_2: ths.$parsePrice(e.price)[1],
                sts: ths.sts,
              }
            }),
            pages: res.pages
          })
        }
      }
      http.request(params)
    },

    /**
     * 获取标签列表
     */
    getTagProd: function (id) {
      var ths = this
      var param = {
        url: '/prod/prodListByTagId',
        method: 'GET',
        data: {
          tagId: ths.tagid,
          current: ths.current,
          size: ths.size
        },
        callBack: res => {
          let list = []
          if (res.current == 1) {
            list = res.records
          } else {
            list = ths.prodList.concat(res.records)
          }
          this.setData({
            prodList: list.map((e) => {
              return {
                ...e,
                price_1: ths.$parsePrice(e.price)[0],
                price_2: ths.$parsePrice(e.price)[1],
                sts: ths.sts,
              }
            }),
            pages: res.pages
          })
        }
      }
      http.request(param)
    },

    /**
     * 获取优惠券商品列表
     */
    getProdByCouponId (id) {
      var ths = this
      var param = {
        url: '/coupon/prodListByCouponId',
        method: 'GET',
        data: {
          couponId: id,
          current: this.current,
          size: this.size
        },
        callBack: res => {
          let list = []

          if (res.current == 1) {
            list = res.records
          } else {
            list = ths.prodList.concat(res.records)
          }

          ths.setData({
            prodList: list.map((e) => {
              return {
                ...e,
                price_1: ths.$parsePrice(e.price)[0],
                price_2: ths.$parsePrice(e.price)[1],
                sts: ths.sts,
              }
            }),
            pages: res.pages
          })
        }
      }
      http.request(param)
    },
    /**
     * 重新加载收藏列表
     */
    reloadCollection () {
      setTimeout(() => {
        this.current = 1
        this.loadAll = false
        this.loadProdData()
      }, 1000)
    }
  }
}
</script>
<style>
@import "./prod-classify.css";
</style>
